@use '@material/checkbox/checkbox' as mdc-checkbox;
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
@use '@material/radio/radio' as mdc-radio;
@use '@material/radio/radio-theme' as mdc-radio-theme;

@use '../core/mdc-helpers/mdc-helpers';
@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
@use './list-option-trailing-avatar-compat';
@use './list-item-hcm-indicator';

// For compatibility with the non-MDC list, we support avatars that are shown at the end
// of the list option. We create a class similar to MDC's `--trailing-icon` one.
@include list-option-trailing-avatar-compat.core-styles($query: mdc-helpers.$mdc-base-styles-query);

.mat-mdc-list-option {
  // The MDC-based list-option uses the MDC checkbox/radio for the selection indicators.
  // We need to ensure that the checkbox and radio styles are not included for the list-option.
  @include mdc-helpers.disable-mdc-fallback-declarations {
    @include mdc-checkbox.static-styles(
      $query: mdc-helpers.$mdc-base-styles-without-animation-query);
    @include mdc-radio.static-styles(
      $query: mdc-helpers.$mdc-base-styles-without-animation-query);

    &:not(._mat-animation-noopable) {
      @include mdc-checkbox.static-styles($query: animation);
      @include mdc-radio.static-styles($query: animation);
    }
  }

  // We can't use the MDC checkbox here directly, because this checkbox is purely
  // decorative and including the MDC one will bring in unnecessary JS.
  .mdc-checkbox {
    // MDC theme styles also include structural styles so we have to include the theme at least
    // once here. The values will be overwritten by our own theme file afterwards.
    @include mdc-checkbox-theme.theme-styles(tokens-mdc-checkbox.get-token-slots());
  }

  // We can't use the MDC radio here directly, because this radio is purely
  // decorative and including the MDC one will bring in unnecessary JS.
  .mdc-radio {
    // MDC theme styles also include structural styles so we have to include the theme at least
    // once here. The values will be overwritten by our own theme file afterwards.
    @include mdc-radio-theme.theme-styles(tokens-mdc-radio.get-token-slots());
  }

  // The internal checkbox/radio is purely decorative, but because it's an `input`, the user can
  // still focus it by tabbing or clicking. Furthermore, `mat-list-option` has the `option` role
  // which doesn't allow a nested `input`. We use `display: none` both to remove it from the tab
  // order and to prevent focus from reaching it through the screen reader's forms mode. Ideally
  // we'd remove the `input` completely, but we can't because MDC uses a `:checked` selector to
  // toggle the selected styles.
  .mdc-checkbox__native-control, .mdc-radio__native-control {
    display: none;
  }
}

.mat-mdc-list-option.mdc-list-item--selected {
  // Improve accessibility for Window High Contrast Mode (HCM) by adding an idicator on the selected
  // option.
  @include list-item-hcm-indicator.private-high-contrast-list-item-indicator();
}
